<template>



  <el-dropdown class="person">
    <span class="el-dropdown-link">
      你好！{{ user }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <router-link :to="{path:'/person'}"  style=" text-decoration: none;">
              个人主页
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link :to="{path:'/'}"  style=" text-decoration: none;">
              退出
            </router-link>
          </el-dropdown-item>
          <!--          <el-dropdown-item>Action 3</el-dropdown-item>-->
          <!--          <el-dropdown-item disabled>Action 4</el-dropdown-item>-->
          <!--          <el-dropdown-item divided>Action 5</el-dropdown-item>-->
        </el-dropdown-menu>
      </template>
    </el-dropdown>



</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import axios from "@/utils/axios";
import qs from "qs";
import {ElMessage} from "element-plus";
const us = ref({
  username:sessionStorage.getItem("id")
})
// var id = sessionStorage.getItem("id");
const user = ref({})

onMounted(() => {
  console.log("username",us.value.username)
  axios.post(
      "/nick",
      qs.stringify(us.value)
  )
      .then(res => {
        console.log("res",res)
        user.value = res
      })
      .catch(err => {
        console.log(err);
      })
});
</script>

<style scoped>

.el-dropdown-link{
  margin-right: 5px;
  padding-right: 5px;
}
.person{
  cursor: pointer;
  float:right;
}
.card{
  margin-top: 14px;
}

</style>
